<template>
  <el-form :model="models" :rules="rules" ref="qmGenForm" label-width="150px" class="qm-gen-form">
    <el-row>
      <el-col :span="12">
        <el-form-item label="代理人：" prop="model.agentUserName">
          <el-input placeholder="请选择" v-model="models.model.agentUserName" readonly>
            <el-button slot="append" icon="el-icon-user" @click="selectUserVisible = true">选择</el-button>
          </el-input>
          <span>(代理您处理事项的人)</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="代理开始时间：" prop="model.agentStartDate">
          <el-date-picker
            v-model="models.model.agentStartDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="委托类型：" prop="model.delegateType">
          <el-select v-model="models.model.delegateType" placeholder="请选择">
            <el-option
              v-for="delegateType in controlData.delegateTypeOptions"
              :key="delegateType.value"
              :label="delegateType.key"
              :value="delegateType.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="代理结束时间：" prop="model.agentEndDate">
          <el-date-picker
            v-model="models.model.agentEndDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 指定类别全权委托 -->
    <el-row v-if="models.model.delegateType === DESIGNATED_CATEGORY_ALL_DELEGATE_KEY">
      <el-col :span="24">
        <el-form-item prop="categoryAllDelegates" label="指定类别：">
          <el-select v-model="models.categoryAllDelegates" multiple clearable>
            <el-option
              v-for="appCategory in controlData.appCategoryOptions"
              :key="appCategory.categoryId"
              :label="appCategory.name"
              :value="appCategory.categoryId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 指定环节委托 -->
    <el-row v-if="models.model.delegateType === DESIGNATED_LINK_DELEGATE_KEY">
      <el-col :span="24">
        <el-form-item prop="linkDelegates" label="指定环节：">
          <qm-table
            :data="{ data: models.delegates }"
            :showToolbar="false"
            :showPager="false"
            :showCheckbox="false"
          >
            <qm-table-column field="appCode">
              流程名称
              <template #content="{ row }">
                <el-select v-model="row.appCode" placeholder="请选择">
                  <el-option
                    v-for="item in controlData.appOptions"
                    :label="item.appName"
                    :value="item.appCode"
                    :key="item.appCode"
                  ></el-option>
                </el-select>
              </template>
            </qm-table-column>
            <qm-table-column field="taskName">
              环节名称
              <template #content="{ row }">
                <el-autocomplete
                  v-model="row.taskName"
                  :fetch-suggestions="
                    (queryString, cb) => {
                      getAppTasks(queryString, cb, row);
                    }
                  "
                  placeholder="请选择环节名称"
                  readonly
                ></el-autocomplete>
              </template>
            </qm-table-column>

            <template #moreHeader="{ }">
              <el-button type="text" @click="doAddMore">新增</el-button>
            </template>
            <template #moreBtn="{ row }">
              <el-button type="text" @click="removeDelegateList(row)">移除</el-button>
            </template>
          </qm-table>
        </el-form-item>
      </el-col>
    </el-row>

    <common-select
      v-model="selectUserVisible"
      selectKey="selectUsers"
      selectMode="0"
      @success="selected"
    ></common-select>
  </el-form>
</template>

<script>
import request from "@/utils/request";
import _ from "lodash";
import CommonSelect from "@/views/commonSelect/list";

// 后端定义的枚举类
const DESIGNATED_LINK_DELEGATE_KEY = "designatedLinkDelegate";
const DESIGNATED_CATEGORY_ALL_DELEGATE_KEY = "designatedCategoryAllDelegate";

export default {
  name: "workflow-actExtDelegate-create",
  components: {
    CommonSelect,
  },
  props: {
    models: Object,
    controlData: Object,
  },
  data() {
    return {
      selectUserVisible: false,
      taskNameOptions: [],
      rules: {
        "model.agentUserName": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.delegateType": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
      },
      DESIGNATED_LINK_DELEGATE_KEY,
      DESIGNATED_CATEGORY_ALL_DELEGATE_KEY,
    };
  },
  mounted() {
    this.fillRule(this.models.model.delegateType);
  },
  methods: {
    selected(user) {
      if (user && user.userId) {
        this.models.model.agentUserName = user.userName;
        this.models.model.agentUserId = user.userId;
      }
    },
    doAddMore() {
      this.models.delegates.push(_.extend({}, this.controlData.blank));
    },
    getAppTasks(queryString, cb, row) {
      window.setTimeout(function () {
        let appCode = row.appCode;
        if (appCode) {
          request({
            url: "/workflow/actExtDelegate/getAppTasks",
            method: "get",
            params: { appCode: appCode },
          }).then((r) => {
            let items = (r || []).map((item) => {
              return { value: item };
            });
            cb(items);
          });
        } else {
          cb([]);
        }
      }, 10);
    },
    removeDelegateList(d) {
      this.models.delegates.remove(d);
    },
    fillRule(val) {
      if (val == DESIGNATED_CATEGORY_ALL_DELEGATE_KEY) {
        this.rules.categoryAllDelegates = [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ];
      } else if (val == DESIGNATED_LINK_DELEGATE_KEY) {
        this.rules.linkDelegates = [
          {
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (!this.models.delegates || this.models.delegates.length == 0) {
                callback(new Error("请选择指定流程、环节"));
              } else {
                callback();
              }
            },
          },
        ];
      }
    },
  },
  watch: {
    "models.model.delegateType": function (val) {
      this.fillRule(val);
    },
  },
};
</script>

<style scoped></style>
